<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #nav{
            margin: 40px;
        }
        #nav h3{
            width: 200px;
            line-height: 40px;
            padding: 0 20px;
            border: 1px solid #999;
            background-color: #abcdef;
            cursor: pointer;
        }
        #nav ul{
            width: 242px;
            display: none;
        }
        #nav ul li{
            width: 200px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #999;
            padding: 0 20px;
            background-color: #f5f5f5;
            cursor: pointer;
        }

    </style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ 纵向导航条 手风琴效果</h1>
    <hr>

    <div id="nav">
        <h3>用户管理</h3>
        <ul>
            <li><a>用户列表</a></li>
            <li><a>添加用户</a></li>
            <li><a>用户权限</a></li>
            <li><a>用户黑名单</a></li>
        </ul>
        <h3>商品管理</h3>
        <ul>
            <li><a>商品列表</a></li>
            <li><a>添加商品</a></li>
            <li><a>商品权限</a></li>
            <li><a>商品黑名单</a></li>
        </ul>
        <h3>订单管理</h3>
        <ul>
            <li><a>订单列表</a></li>
            <li><a>添加订单</a></li>
            <li><a>订单权限</a></li>
            <li><a>订单黑名单</a></li>
        </ul>
        <h3>评论管理</h3>
        <ul>
            <li><a>评论列表</a></li>
            <li><a>添加评论</a></li>
            <li><a>评论权限</a></li>
            <li><a>评论黑名单</a></li>
        </ul>
        <h3>系统管理</h3>
        <ul>
            <li><a>系统列表</a></li>
            <li><a>添加系统</a></li>
            <li><a>系统权限</a></li>
            <li><a>系统黑名单</a></li>
        </ul>
    </div>


    <script>
        $(function(){
            // 进入页面 首个是展开的
            $('#nav ul:eq(0)').show();

            // 给h3绑定点击事件
            $('#nav h3').click(function(){
                // $(this)
                // .next('ul')
                // .slideDown()
                // .siblings('ul')
                // .slideUp();
                $(this)
                .next('ul').slideDown()
                .siblings('ul').slideUp();
            });
        });


    
    </script>
</body>
</html>